<template>
  <div class="notify">
    <div data-v-3555cafc="" class="el-page-header">
      <div class="el-page-header__left">
        <div class="el-page-header__title"></div>
      </div>
      <div class="el-page-header__content">通知公告</div>
    </div>
    <el-divider></el-divider>

    <el-alert title="不可关闭的 alert" type="success" :closable="true"></el-alert>
    <el-alert title="自定义 close-text" type="success" close-text="知道了"></el-alert>
    <el-alert title="设置了回调的 alert" type="success" @close="hello"></el-alert>

  </div>
</template>

<script>
    export default {
        name: "notify",
        data() {
            return {}
        },
        methods: {
            hello() {
                alert('Hello World!');
            }
        },
        mounted() {
        },
    }
</script>

<style scoped>
  .notify >>> .el-page-header__left::after {
    content: "";
    position: absolute;
    width: 3px;
    height: 24px;
    right: -20px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: #1e9fff;
  }

  .notify >>> .el-divider--horizontal {
    display: block;
    height: 1px;
    width: 100%;
    margin: 10px 0 24px 0;
  }

  .notify >>> .el-divider {
    background-color: #1e9fff;
    position: relative;
  }

  .notify >>> .el-alert {
    margin-bottom: 20px;
  }
</style>
